Frontend WebHID Seadmete Loend: Ühendatud Seadmete Avastamine JavaScriptiga

WebHID API avab veebirakendustele potentsiaali suhelda otse suure hulga Human Interface Devices (HID) seadmetega, mis on tavaliselt kättesaadavad ainult natiivrakendustele. See avab põnevaid võimalusi uuenduslike veebikogemuste loomiseks, mis suhtlevad spetsiaalse riistvaraga, nagu mängukontrollerid, kohandatud sisendseadmed, teaduslikud instrumendid ja palju muud. See põhjalik juhend sukeldub seadmete loendamise põhimõttesse, mis on oluline esimene samm soovitud HID-seadmega ühenduse loomisel.

Mis on WebHID API?

WebHID API võimaldab veebirakendustel pääseda ligi Human Interface Devices seadmetele. Need seadmed hõlmavad laia kategooriat, sealhulgas:

• Mängukontrollerid: Juhtkangid, mängupuldid, võidusõiduroolid
• Sisendseadmed: Klaviatuurid, hiired, juhtpallid
• Tööstuslikud juhtseadmed: Spetsiaalsed juhtpaneelid, sensoriliidesed
• Teaduslikud instrumendid: Andmehõiveseadmed, mõõteriistad
• Kohandatud riistvara: Spetsiifilistel eesmärkidel loodud eritellimusel sisendseadmed

Erinevalt vanematest brauseri API-dest, mis pakkusid piiratud HID-tuge, pakub WebHID API otsest juurdepääsu HID-seadmetele, võimaldades arendajatel luua rikkalikumaid ja interaktiivsemaid veebirakendusi. Kujutage ette robotkäe juhtimist kauges laboris, 3D-mudeli manipuleerimist kohandatud sisendseadmega või andurite andmete vastuvõtmist otse veebipõhises armatuurlauas – kõik brauseris.

HID-seadmete loendamise mõistmine

Enne kui saate HID-seadmega suhelda, peab teie veebirakendus avastama, millised seadmed on kasutaja süsteemiga ühendatud. Seda protsessi nimetatakse seadmete loendamiseks. WebHID API pakub mehhanismi konkreetsete HID-seadmete juurdepääsu taotlemiseks, lähtudes tootja ID-st (VID) ja toote ID-st (PID) või kasutades laiemat filtrit.

Protsess hõlmab tavaliselt järgmisi samme:

1. Seadme juurdepääsu taotlemine: Veebirakendus palub kasutajal valida HID-seade, kasutades navigator.hid.requestDevice().
2. Seadmete filtreerimine: Saate määrata filtreid, et piirata kasutajale esitatavate seadmete loendit. Need filtrid põhinevad seadme VID-il ja PID-il.
3. Seadme valiku käsitlemine: Kasutaja valib loendist seadme.
4. Seadme avamine: Rakendus avab ühenduse valitud seadmega.
5. Andmeedastus: Kui ühendus on loodud, saab rakendus seadmest andmeid saata ja vastu võtta.

Samm-sammult juhend seadmete loendamiseks

1. Seadme juurdepääsu taotlemine filtritega

Meetod navigator.hid.requestDevice() on sisenemispunkt HID-seadmete juurdepääsu taotlemiseks. See võtab valikulise argumendi `filters`, mis on objektide massiiv, mis määrab leitavate seadmete VID-i ja PID-i.

Siin on näide, kuidas taotleda juurdepääsu konkreetse VID-i ja PID-iga seadmele:

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // Asenda oma seadme tootja ID-ga
          productId: 0x5678 // Asenda oma seadme toote ID-ga
        },
        // Vajadusel lisa teiste seadmete jaoks rohkem filtreid
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // Kasuta esimest valitud seadet
      console.log("HID Device Found:", device);
      // Ava seade ja alusta suhtlust
      await openHIDDevice(device);
    } else {
      console.log("No HID device selected.");
    }
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

// Näide kasutamisest (nt nupuvajutusega käivitatav):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

Olulised kaalutlused:

• Tootja ID (VID) ja toote ID (PID): Need on unikaalsed identifikaatorid, mis on määratud USB- ja Bluetooth-seadmetele. Sihtseadme VID-i ja PID-i peate hankima tootja dokumentatsioonist või kasutades süsteemitööriistu (nt Windowsi seadmehaldur, macOS-i süsteemiteave või Linuxi `lsusb`).
• Kasutaja nõusolek: Meetod requestDevice() kuvab kasutajale brauseri kontrollitud loa küsimise, mis võimaldab neil valida, millistele HID-seadmetele juurdepääs anda. See on oluline turvameede, et vältida pahatahtlike veebisaitide juurdepääsu tundlikule riistvarale ilma kasutaja nõusolekuta.
• Mitu filtrit: Saate lisada massiivi `filters` mitu filtrit, et taotleda juurdepääsu seadmetele, millel on erinevad VID-id ja PID-id. See on kasulik, kui teie rakendus toetab mitut riistvarakonfiguratsiooni.

2. Seadme teabe hankimine

Kui kasutaja on seadme valinud, tagastab meetod requestDevice() massiivi HIDDevice objekte. Iga HIDDevice objekt sisaldab teavet seadme kohta, nagu selle VID, PID, usagePage, usage ja collections. Saate seda teavet kasutada seadme edasiseks tuvastamiseks ja konfigureerimiseks.

async function openHIDDevice(device) {
  try {
    await device.open();
    console.log("HID Device Opened:", device.productName);

    // Kuula sisendaruandeid
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`Received input report ${reportId}:`, uint8Array);
      // Töötle sisendaruande andmeid
    });

    device.addEventListener("disconnect", event => {
      console.log("HID Device Disconnected:", device.productName);
      // Käsitle seadme lahtiühendamist
    });

  } catch (error) {
    console.error("Error opening HID device:", error);
  }
}

Seadme omadused:

• vendorId: Seadme tootja ID.
• productId: Seadme toote ID.
• productName: Toote inimesele loetav nimi.
• collections: Massiiv HIDCollectionInfo objekte, mis kirjeldavad seadme HID-kogusid (aruanded, funktsioonid jne). See võib olla väga keeruline ja on vajalik ainult keerukate seadmete puhul.

3. Seadme ühenduse ja lahtiühendamise käsitlemine

WebHID API pakub sündmusi, et teavitada teie rakendust, kui seade on ühendatud või lahti ühendatud. Saate kuulata sündmusi connect ja disconnect objektil navigator.hid.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID Device Connected:", device);
  // Käsitle seadme ühendamist (nt ava seade uuesti)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID Device Disconnected:", device);
  // Käsitle seadme lahtiühendamist (nt puhasta ressursid)
});

Parimad praktikad ühenduse haldamiseks:

• Uuesti loendamine ühendamisel: Kui seade ühendub, on sageli hea tava seadmeid uuesti loendada, et tagada, et teie rakendusel on ajakohane loend.
• Ressursside puhastamine lahtiühendamisel: Kui seade lahti ühendub, vabastage kõik sellega seotud ressursid (nt sulgege seadme ühendus, eemaldage sündmuste kuulajad).
• Vigade käsitlemine: Rakendage tugev vigade käsitlemine, et käsitleda graatsiliselt olukordi, kus seade ei saa ühendust või ühendatakse ootamatult lahti.

Täiustatud seadmete filtreerimise tehnikad

Lisaks VID-i ja PID-i põhifiltreerimisele pakub WebHID API täiustatumaid tehnikaid konkreetsete seadmete sihtimiseks. See on eriti kasulik, kui tegemist on seadmetega, millel on mitu liidest või funktsiooni.

1. Filtreerimine kasutuslehe ja kasutuse järgi

HID-seadmed on korraldatud *kasutuslehtedeks* ja *kasutusteks*, mis määratlevad seadme pakutava funktsionaalsuse tüübi. Näiteks klaviatuur kuulub kasutuslehele "Generic Desktop" ja sellel on kasutus "Keyboard". Saate seadmeid filtreerida nende kasutuslehe ja kasutuse alusel, et sihtida konkreetseid seadmetüüpe.

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // Generic Desktop Page
          usage: 0x06      // Keyboard Usage
        }
      ]
    });

    // ... (ülejäänud kood seadme käsitlemiseks)
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

Kasutuslehe ja kasutuse väärtuste leidmine:

• HID kasutustabelid: Ametlikud HID kasutustabelid (avaldatud USB Implementers Forum) määratlevad standardiseeritud kasutuslehed ja kasutused erinevat tüüpi seadmete jaoks.
• Seadme dokumentatsioon: Seadme tootja dokumentatsioon võib määrata nende seadme kasutuslehe ja kasutuse väärtused.
• HID aruande kirjeldajad: Täiustatud stsenaariumide korral saate analüüsida seadme HID aruande kirjeldajat, et teha kindlaks selle toetatud kasutuslehed ja kasutused.

2. Mitme liidese käsitlemine

Mõned HID-seadmed pakuvad mitut liidest, millest igaühel on oma funktsioonide komplekt. WebHID API käsitleb iga liidest eraldi HID-seadmena. Konkreetsele liidesele juurdepääsuks peate võib-olla kombineerima VID/PID-i filtreerimise kasutuslehe/kasutuse filtreerimisega, et sihtida soovitud liidest.

Praktilised näited ja kasutusjuhud

1. Kohandatud mängukontrolleri liidese loomine

Kujutage ette, et loote veebipõhist mängu ja soovite toetada kohandatud mängukontrollerit. Saate kasutada WebHID API-t, et otse lugeda sisendit kontrolleri nuppudelt, juhtkangidelt ja muudelt juhtnuppudelt. See võimaldab teil luua väga reageeriva ja kaasahaarava mängukogemuse.

2. Veebipõhise MIDI-kontrolleri loomine

Muusikud ja helitehnikud saavad kasu veebipõhistest MIDI-kontrolleritest, mis suhtlevad digitaalsete helitöötlusjaamadega (DAW) või süntesaatoritega. WebHID API võimaldab teil luua kohandatud MIDI-kontrollereid, mis saadavad ja võtavad vastu MIDI-sõnumeid otse brauseris.

3. Suhtlemine teaduslike instrumentidega

Teadlased ja teadlased saavad kasutada WebHID API-t, et luua liides teaduslike instrumentidega, nagu andmehõiveseadmed, andurid ja mõõteriistad. See võimaldab neil andmeid koguda ja analüüsida otse veebipõhises armatuurlauas või analüüsitööriistas.

4. Juurdepääsetavuse rakendused

WebHID pakub võimalusi abistavate tehnoloogiate loomiseks. Näiteks saab spetsiaalseid sisendseadmeid motoorikahäiretega kasutajatele integreerida otse veebirakendustesse, pakkudes kohandatumaid ja juurdepääsetavamaid kogemusi. Globaalsed näited võivad hõlmata spetsiaalsete silmade jälgimise seadmete integreerimist käed-vabad navigeerimiseks või kohandatavaid nupumassiive ühe lülitiga juurdepääsuks erinevates keeltes ja sisestusmeetodites.

Brauseritevaheline ühilduvus ja turvakaalutlused

1. Brauseri tugi

WebHID API-d toetavad praegu Chromium-põhised brauserid (Chrome, Edge, Opera) ja seda arendatakse teiste brauserite jaoks. Enne WebHID API rakendamist oma rakenduses on oluline kontrollida brauseri ühilduvust ja pakkuda varumehhanisme brauserite jaoks, mis API-d ei toeta.

2. Turvakaalutlused

WebHID API on loodud turvalisust silmas pidades. Brauser küsib kasutajalt luba enne, kui lubab veebirakendusel HID-seadmele juurde pääseda. See takistab pahatahtlikel veebisaitidel tundlikule riistvarale juurdepääsu ilma kasutaja nõusolekuta. Lisaks töötab WebHID API brauseri turvaliivakastis, piirates rakenduse juurdepääsu süsteemiressurssidele.

• Ainult HTTPS: WebHID, nagu ka teised võimsad veebi API-d, vajab toimimiseks turvalist konteksti (HTTPS).
• Kasutaja žestid: Seadmele juurdepääsu taotlemine nõuab tavaliselt kasutaja žesti (nt nupuvajutust), et vältida soovimatuid juurdepääsutaotlusi.
• Lubade API: Lubade API-t saab kasutada WebHID-i lubade päringuks ja haldamiseks.

Levinud probleemide tõrkeotsing

1. Seadet ei leitud

Kui teie rakendus ei leia HID-seadet, kontrollige VID-i ja PID-i uuesti. Veenduge, et need vastavad seadme tegelikele identifikaatoritele. Samuti veenduge, et seade on korralikult ühendatud ja operatsioonisüsteemi poolt ära tuntud.

2. Juurdepääs keelatud

Kui kasutaja keelab HID-seadmele juurdepääsu loa, ei saa teie rakendus sellega suhelda. Käsitlege seda stsenaariumi graatsiliselt, kuvades kasutajale teate ja selgitades, miks juurdepääs on vajalik. Kaaluge kasutajale alternatiivsete võimaluste pakkumist oma rakendusega suhtlemiseks.

3. Andmevormingu probleemid

HID-seadmed kasutavad andmete saatmiseks ja vastuvõtmiseks sageli kohandatud andmevorminguid. Peate mõistma seadme andmevormingut ja rakendama oma rakenduses sobivat parsimis- ja serialiseerimisloogikat. Lisateabe saamiseks andmevormingu kohta vaadake seadme tootja dokumentatsiooni.

Järeldus

WebHID API võimaldab veebiarendajatel luua uuenduslikke ja interaktiivseid veebirakendusi, mis suhtlevad otse Human Interface Devices seadmetega. Mõistes seadmete loendamise, filtreerimise ja ühenduse haldamise põhimõtteid, saate avada WebHID API täieliku potentsiaali ja luua köitvaid kasutajakogemusi. Võtke omaks WebHID-i jõud, et ühendada veeb füüsilise maailmaga, edendades uusi võimalusi loovuseks, tootlikkuseks ja juurdepääsetavuseks kogu maailmas.

Lisamaterjalid

• WebHID API spetsifikatsioon
• WebHID API Chrome'i arendajatele
• USB Implementers Forum (HID teave)